<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup>
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef()
const getBaseOptions = () => {
  return {
    color: ['#23EBC2', '#FAD760', '#00D9FF', '#F77723', '#0099FF'],
    tooltip: {
      formatter: function (d) {
        return '类别：' + d.seriesName + '</br>' + '数辆：' + d.value[2] + '辆'
      },
      textStyle: {
        // color: '#fff',
        align: 'left'
      }
      // backgroundColor: '#007CA4'
    },
    grid: {
      top: 80,
      bottom: 6,
      left: '2%',
      right: '16%',
      containLabel: true
    },
    legend: {
      data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      name: '轴名称\n(km)',
      nameGap: 8,
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      name: '轴名称(h)',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#999'
        }
      }
    },
    series: [
      {
        name: '类目5',
        type: 'scatter',
        symbolSize: function (d) {
          return d[2] / 2
        },
        data: [
          [25, 20, 50],
          [12, 18, 3],
          [50, 30, 20],
          [20, 70, 45],
          [10, 90, 75]
        ]
      },
      {
        name: '类目4',
        type: 'scatter',
        symbolSize: function (d) {
          return d[2] / 2
        },
        data: [
          [10, 20, 50],
          [20, 46, 25],
          [50, 70, 58],
          [30, 70, 25],
          [15, 9, 75]
        ]
      },
      {
        name: '类目3',
        type: 'scatter',
        symbolSize: function (d) {
          return d[2] / 2
        },
        data: [
          [10, 20, 50],
          [20, 28, 26],
          [41, 70, 82],
          [32, 70, 25],
          [15, 9, 73]
        ]
      },
      {
        name: '类目2',
        type: 'scatter',
        symbolSize: function (d) {
          return d[2] / 2
        },
        data: [
          [10, 20, 55],
          [20, 36, 25],
          [50, 70, 58],
          [30, 70, 50],
          [15, 9, 50]
        ]
      },
      {
        name: '类目1',
        type: 'scatter',
        symbolSize: function (d) {
          return d[2] / 2
        },
        data: [
          [20, 10, 50],
          [20, 80, 56],
          [50, 70, 58],
          [30, 50, 50],
          [15, 90, 75]
        ]
      }
    ]
  }
}
onMounted(() => {
  nextTick(() => {
    const option = getBaseOptions()
    options.value = option
  })
})
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 2.7rem;
}
</style>
